defaultとnamed exportsの違い

code:sample.ts

// default export

export default myFunction() { ... }

// named export

export function myFunction() { ... };

moduleはたった一つのdefault exportと、好きなだけ多くのnamed exportsがもてる

名前付きエクスポートは、さまざまな値をエクスポートするのに役立ちます。インポートするときに、対応するオブジェクトと同じ名前を使用しなければなりません。

一方、デフォルトエクスポートは以下のように任意の名前を使用できます:

どちらを使えばいいのか？

moduleがsingle thing（例：component）だけをimport/exportするときには、default import/exportを使うのがおすすめ

export default Button

シンプル！

Named exportsはutility module（いくつかの関数をexportするようなやつ）におすすめ

（無名関数に対して？）named exportがおすすめの記事

大きな2つの課題によって named export のみを許容するようになりました。

1. default exportはリファクタリングしにくい

named exportは必ず名前を付ける必要があるから、デフォルトで使っていれば名前を付ける必要がない

code:nameChangeInNamed.ts

export { myFunction as superUltraHyperMracleFunction }

合理性がある場合許容する

Server-side Node.js プロジェクトの場合は Express が Request や Response といった主語の大きな名前空間を専有しているせいで { Request as ExpressRequest } などとせざるを得ないシチュエーションは頻発します

2. エディタとの親和性

utils/converter/index.ts といった命名よりも、 utils/textFormat/converter.ts

明確化のtips

普通のオブジェクトを名前空間として用いると Tree Shaking が効かずバンドルサイズが膨らむ

Namespace Import を用いれば Tree Shaking が効く

しかし Namespace Import は Default Export と同様に補完が効かない

TypeScript Language Service Plugin でファイル名を用いた補完を効かせていいとこ取り！t

モジュールとは、変数や関数などをまとめたものです。 JavaScriptにおいては、1つのモジュールは1つのJavaScriptファイルに対応します。

ECMAScriptモジュールは、ES2015で導入されたJavaScriptファイルをモジュール化する言語標準の機能です。

named export/import

import

import文のあとに続けて{}を書き、その中にインポートしたい名前つきエクスポートの名前を入れます

code:js

import { foo, bar } from "./my-module.js";

default export/import

実はデフォルトエクスポートは、defaultという固有の名前による名前つきエクスポートと同じものです。

名前つきエクスポートでas defaultとエイリアスをつけることでデフォルトエクスポートすることもできます。

...同様に、名前つきインポートにおいてもdefaultという名前がデフォルトインポートに対応しています。

デフォルトインポートは、インポート先のモジュールがデフォルトエクスポートをしている必要があります。 同様に名前つきインポートは、インポート先のモジュールが指定した名前つきエクスポートをしている必要があります。

asで名前空間オブジェクトを宣言して、オブジェクトのプロパティとしてexportされた変数や関数にアクセスする

import * as myModule from "./my-module.js";

副作用のためのインポート

グローバル変数を操作するモジュールを使う時に使う

import "./side-effects.js";